<template>
    <div style="width: 100%;height: 100vh;overflow: hidden;background-color:darkcyan">
        <Particles></Particles>
        <div style="width: 400px;margin:100px auto">
            <div style="color: #cccccc;font-size: 30px;text-align: center;padding: 30px 0">欢迎登录</div>
            <!--form表单-->
            <el-form ref="form" :model="form" size="normal" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="form.username" prefix-icon="el-icon-user-solid"></el-input>


                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" prefix-icon="el-icon-lock" show-password=""></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex">
                        <el-input prefix-icon="el-icon-key" v-model="form.validCode" style=";width: 50%;" placeholder="请输入验证码"></el-input>
                        <ValidCode @input="createValidCode" style="width: 190px;margin-left: 30px" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-radio v-model="form.role"  :label="1">管理员</el-radio>
                    <el-radio v-model="form.role"  :label="2">普通用户</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @keyup.enter.native="login" @click="login"
                               id="login">登 录
                    </el-button>
                </el-form-item>
                <el-form-item style="display: flex;flex-direction: row;">
                    <el-button @click="$router.push('/register')">注册</el-button>

                    <el-button @click="" style="margin-left: 230px">忘记密码</el-button>

                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import Particles from '../components/particles/index'
    import request from '../utils/request'
    import  ValidCode from '../components/ValidCode'
    export default {
        name: "Login",
        components: {
            Particles,
            ValidCode
        },
        data() {
            return {
                validCode: '',
                form: {role:1},

                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
                    ],
                }

            }
        },
        created() {
            let that = this;
            document.onkeydown = function (e) {
                e = window.event || e;
                if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter')) {//验证在登录界面和按得键是回车键enter
                    that.login('form');//登录函数
                }
            }
        },
        methods: {
            createValidCode(data) {
                this.validCode = data
            },
            login() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (!this.form.validCode) {
                            this.$message.error("请填写验证码")
                            return
                        }
                        if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
                            this.$message.error("验证码错误")
                            return
                        }
                        request.post("/users/login", this.form).then(res => {
                            if (res.code == '0') {
                                this.$message({
                                    message: '登录成功',
                                    type: 'success',
                                });
                                sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
                                this.$store.dispatch('connect')
                                this.$router.push("/user") //登录成功之后进行页面跳转

                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error',
                                })
                            }
                        })
                    }
                })

            }
        }
    }
</script>

<style scoped>
    #login {

        box-shadow: 0 0 0px #ccc;
        transition: all 0.5s;
    }

    .el-input__inner {
        -webkit-appearance: none;

        border-radius: 20px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;

        height: 45px;
        line-height: 45px;
        padding: 0 10px;
        width: 100%;
        background: darkcyan;

    }

</style>
